<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 2000px;
        }

        img {
            vertical-align: top;
        }

        .fdj {
            width: 800px;
            margin: auto;
            margin-top: 300px;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: #ff0;
            position: relative;
            float: left;
        }

        .box img {
            width: 300px;
            height: 300px;
        }

        .a {
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            top: 0;
            cursor: move;
            /* display: none; */
            /* 可见性 */
            visibility: hidden;
            /* opacity: 0; */

            /* 没有指向事件   */
            pointer-events: none;
        }

        .right {
            width: 400px;
            height: 400px;
            background-color: #eee;
            float: right;
            overflow: hidden;
            /* 隐藏 */
            visibility: hidden;
            position: relative;
        }

        .right img {
            width: 1200px;
            height: 1200px;
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="fdj">
        <div class="box">
            <img src="https://img13.360buyimg.com/babel/s1180x940_jfs/t1/180074/39/30857/114078/63a54d0eE19122531/7c2418d4bc3f69f4.jpg.avif"
                alt="">
            <div class="a"></div>
        </div>
        <div class="right">
            <img src="https://img13.360buyimg.com/babel/s1180x940_jfs/t1/180074/39/30857/114078/63a54d0eE19122531/7c2418d4bc3f69f4.jpg.avif"
                alt="">
        </div>
    </div>



    <script>

        // display:none   元素隐藏了   在dom树中还存在
        //    元素隐藏以后，可以获取到元素，但是获取不到元素的相关的其他信息
        // visibility:hidden  / opacity:0 元素不可见  在dom树中还存在
        //    元素隐藏以后，可以获取到元素及相关的其他信息
        // remove()       元素消失了   在dom树中不存在
        //    这个元素彻底没了，元素是获取不到的



        // 放大镜
        //    前提条件
        //       结构  左边盒子和一个遮罩层     右边盒子和一张超出的大图
        //       遮罩层的移动方向和大图的移动反向是相反的
        //       左边盒子与遮罩层的比例   =   右边盒子和大图的比例


        // 注意
        //    小图和大图不是同一张图片 


        // 当页面可能出现滚动条的时候
        //    e.x / e.y  要替换成 e.pageX   e.pageY

        //    e.offsetX   距离目标源的坐标 

        //   css属性  pointer-events:none



        var oBox = document.querySelector('.box');
        var oA = document.querySelector('.a');

        var oRight = document.querySelector('.right');
        var oRightImg = document.querySelector('.right img');

        // 获取元素的相关尺寸需要消耗性能    move事件是一个高频率事件
        var r = oA.offsetWidth / 2;
        console.log(r);
        var _boxLeft = oBox.offsetLeft;
        var _boxTop = oBox.offsetTop;

        var maxWidth = oBox.clientWidth - oA.offsetWidth;
        var maxHeight = oBox.clientHeight - oA.offsetWidth;


        // 放大镜的移动比例 = 大图的移动范围 / 小图的移动范围
        var bigMaxWidth = oRightImg.clientWidth - oRight.offsetWidth;

        var scale = bigMaxWidth / maxWidth;
        console.log(scale);

        // 鼠标移入移出
        oBox.addEventListener('mouseover', function () {
            oA.style.visibility = 'visible';
            oRight.style.visibility = 'visible';
        })
        oBox.addEventListener('mouseout', function () {
            oA.style.visibility = 'hidden';
            oRight.style.visibility = 'hidden';
        })




        document.onmousemove = function (e) {
            e = e || event;
            // var x = e.pageX - r - _boxLeft;
            // var y = e.pageY - r - _boxTop;
            var x = e.offsetX - r ;
            var y = e.offsetY - r ;
            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > maxWidth) x = maxWidth;
            if (y > maxHeight) y = maxHeight;
            oA.style.left = x + 'px';
            oA.style.top = y + 'px';

            // 图片反向移动
            oRightImg.style.left = -x * scale + 'px';
            oRightImg.style.top = -y * scale + 'px';
        }

    </script>

</body>

</html>